<template>
    <el-row>
        <el-tree-select
            v-model="selectValue"
            placeholder="请选择目标"
            @change="handleChange"
            ref="treeSelectRef"
            node-key="id"
            style="width: 400px"
            check-strictly
            clearable
            @clear="onClear"
            :props="{
                label: 'name',
                isLeaf: (data) => data.type == 'target',
                disabled: (data) => data.type == 'target',
            }"
            :data="treeData">
            <template #prefix>
                <!-- {{ data.name }} -->
                {{ currentNode?.parent_name || '' }}
            </template>
            <template #default="{ data: { name, type, icon } }">
                <span style="color: gray" v-if="type == 'catalog'">
                    <!-- <NIcon size="10">
                        <ActionIcon.Grid></ActionIcon.Grid>
                    </NIcon> -->
                    <TreeIcon :url="icon" :size="18" color="#fff"></TreeIcon>
                </span>
                <span style="color: rgb(248, 223, 114)" v-if="type == 'target'">
                    <TreeIcon
                        :url="icon"
                        :size="18"
                        color="rgb(248, 223, 114)"></TreeIcon>
                </span>
                {{ name }}
            </template>
        </el-tree-select>
    </el-row>
</template>

<script setup lang="ts">
import { apiList } from '@/api/apiList'
import { ActionIcon } from '@/common/ActionIconList'
import { useCompRef } from '@/hooks'
import { ICatalog, ICatalogTree } from '@/types/keyobject'
import { isOK } from '@/utils/resUtils'
import { emit } from 'process'
import { onBeforeUnmount, onBeforeUpdate, onMounted, onUpdated } from 'vue'
import { ref } from 'vue'

import { ElTree, ElTreeSelect } from 'element-plus'
import TreeIcon from './TreeIcon.vue'
import { onUnmounted } from 'vue'
import { Nullable } from 'element-plus/es/components/cascader-panel/src/node'
const emits = defineEmits<{
    'update:modelValue': [string, ICatalogTree]
}>()
const props = defineProps<{
    modelValue?: string
}>()

const selectValue = ref<Nullable<string>>(null)

const treeSelectRef = useCompRef(ElTree)

const treeData = ref<ICatalogTree[]>([])

onMounted(() => {
    selectValue.value = props.modelValue || null

    apiList.catalogApi.queryTargetTree().then((res) => {
        if (isOK(res)) {
            treeData.value = res.result.children
        }
    })
})

const currentNode = ref<ICatalogTree>()

function handleChange(value: string) {
    const data = treeSelectRef.value?.getCurrentNode() as ICatalogTree
    // console.log('change node', node)

    currentNode.value = { ...data }
    emits('update:modelValue', value, data)
}

onBeforeUpdate(() => {
    // if (props.modelValue) {
    //     selectValue.value = props.modelValue
    // }
})

onUnmounted(() => {
    selectValue.value = null
    currentNode.value = undefined
})

function onClear() {
    currentNode.value = undefined
}
</script>

<style lang="scss" scoped></style>
